<template>
  <div class="common-table">
    <el-table
      v-bind="$attrs"
      :data="tableData"
      size="small"
      :height="height || '100%'"
      border
      :header-cell-style="{
        backgroundColor: 'rgb(4, 45, 69)',
        fontWeight: 400,
        color: '#fff',
      }"
      :row-class-name="tableRowClassName"
      table-layout="auto"
      cell-class-name="table-cell-class"
    >
      <el-table-column
        v-for="column of columns"
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
        :formatter="column.formatter"
      >
        <template #default="scope">
          <div v-if="column.label === '操作'">
            <slot name="operate" v-bind="scope" />
          </div>
          <div v-else-if="column.type === 'image' && scope.row[column.prop]">
            <el-image
              style="width: 50px; background-color: #fff"
              :src="scope.row[column.prop]"
              fit="contain"
              :preview-src-list="[scope.row[column.prop]]"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
interface TableColumn {
  prop: string;
  label: string;
  type?: string;
  formatter?: any;
}
const props = defineProps<{
  columns: TableColumn[];
  tableData: any[];
  height?: string | number;
}>();

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even-row";
  } else {
    return "odd-row";
  }
};
</script>

<style lang="less">
.el-table .even-row {
  --el-table-tr-bg-color: rgb(11, 56, 80);
}
.el-table .odd-row {
  --el-table-tr-bg-color: rgb(4, 45, 69);
}
.common-table {
  .el-table {
    --el-table-border-color: #666;
    background-color: rgb(4, 45, 69);
  }
}
</style>
